<template>
  <div class="home">
    <h3 style="background: #fff; color: #000">用户管理区域</h3>
    <el-table :data="userlist" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="rowClick(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data(){
    return {
       userlist: [
         { id: 11, name: '张三', age: 10 },
         { id: 22, name: '李四', age: 20 },
         { id: 33, name: '王五', age: 30 },
         { id: 44, name: '赵六', age: 40 }
       ]
    }
  },
  methods:{
    rowClick(val){
      this.$router.push(`/detile/${val.id}`);
    }
  }
};
</script>
